<div class="row">
  <div class="col-md-4">
    <nb-card>
      <nb-card-header>设备信息</nb-card-header>
      <nb-card-body>
        <div class="form-group">
          <label>设备编号</label>
          <input nbInput class="form-control" [(ngModel)]="devNo" disabled>
          <label>IP地址</label>
          <input nbInput class="form-control" [(ngModel)]="ipAddress" >
          <label>Mac地址</label>
          <input nbInput class="form-control" [(ngModel)]="macAddress">
          <label>设备名</label>
          <input nbInput class="form-control" [(ngModel)]="devName">
        </div>
      </nb-card-body>
      <nb-card-footer>
        <button nbButton [status]="'info'" [size]="'small'">提交</button>
        <button nbButton [status]="'warning'" [size]="'small'" style="float: right" (click)="onCtrl()">控制</button>
        <button nbButton [status]="'danger'" [size]="'small'" style="float: right;margin-right: 5px;" (click)="onCtrl()">拉闸设置</button>
      </nb-card-footer>
    </nb-card>
  </div>
  <div class="col-md-8">
    <nb-card>
      <nb-card-body>
        <nb-tabset>
          <nb-tab tabTitle="三相电流">
            <div echarts [options]="optionPhaseCurrent" style="width:100%;height:375px"></div>
          </nb-tab>
          <nb-tab tabTitle="三相电压">
            <div echarts [options]="optionPhaseVoltage" style="width:100%;height:375px"></div>
          </nb-tab>
          <nb-tab tabTitle="三相有功">
            <div echarts [options]="optionPhaseActivePower" style="width:100%;height:375px"></div>
          </nb-tab>
          <nb-tab tabTitle="三相无功">
            <div echarts [options]="optionPhaseReactivePower" style="width:100%;height:375px"></div>
          </nb-tab>
        </nb-tabset>
      </nb-card-body>
    </nb-card>
  </div>
</div>

<nb-card>
  <nb-tabset>
    <nb-tab tabTitle="用电明细">
      <ng2-smart-table [settings]="settings" [source]="source">
      </ng2-smart-table>
    </nb-tab>
    <nb-tab tabTitle="本月用电">
      <device-daily-component [devNo]="devNo"></device-daily-component>
    </nb-tab>
    <nb-tab tabTitle="操作日志">
      <device-log-component [showFilter]="false" [devNo]="devNo"></device-log-component>
    </nb-tab>
  </nb-tabset>
</nb-card>
<ng-template #dialog let-ref="dialogRef">
  <nb-card style="min-width:800px">
    <nb-card-header>发送指令</nb-card-header>
    <nb-card-body style="max-height: 400px;overflow: auto;">
      <div class="form-group">
        <label>操作列表</label>
        <div>
          <button nbButton status="parimary" size="small" (click)="ref.close()" style="margin-right:20px">同步时钟</button>
          <button nbButton status="info" size="small" (click)="ref.close()" style="margin-right:20px">数据招读</button>
          <button nbButton status="danger" size="small" (click)="ref.close()" style="margin-right:20px">拉闸</button>
          <button nbButton status="warning" size="small" (click)="ref.close()" style="margin-right:20px" disabled>合闸</button>
        </div>
        <label>输入指令</label>
        <textarea class="form-control" nbInput #command></textarea>
        <button nbButton status="success" size="small" (click)="ref.close(command.value)">发送</button>
      </div>
    </nb-card-body>
    <nb-card-footer>
      <button nbButton status="danger" size="small" (click)="ref.close()" style="margin-right:20px">取消</button>
    </nb-card-footer>
  </nb-card>
</ng-template>
